ホームページのスクリーンセーバー!?
今回は、「マウスやキーボードを一定時間操作しないで放っておくと、別のページを自動的に表示する」というテクニックを紹介します。ホームページのスクリーンセーバーのような機能と考えればよいでしょう。JavaScriptの記述も意外と簡単ですよ! サンプルページ

→ BODYタグにイベントを追加する
 
まずは、BODYタグにonLoadイベントを追加し、スクリーンセーバー機能を提供する関数「count()」を呼び出します。また、マウスやキーボードが操作された際に、秒数のカウントをゼロに戻せるようにonmouseMoveイベントとonkeydownイベントを追加し、関数「reset()」を呼び出します。
<BODY onLoad="count()" onmouseMove="reset()" onkeydown="reset()">


→ JavaScript関数「count()」を自作する
 
続いて、JavaScriptの記述に移ります。初めに、2つの変数を定義しておきましょう。「t」は秒数をカウントするための変数です。「tmax」は別ページへ移動するまでの秒数を指定する変数です。これは各自が好きな秒数を指定してください(今回の例では15秒を指定しています)。関数「count()」では、「t」の値を1つだけ増やし、それが「tmax」を超えるようであれば、location.hrefで指定したURLへ移動します。また、最後に「setTimeout()」を追加し、1秒後に再び関数「count()」が呼び出されるようにします。
<SCRIPT language="JavaScript">
<!--
t=0;
tmax=15;

function count(){
t++;
if (t>tmax) location.href="slideshow.html";
setTimeout("count()",1000);
}
// -->
</SCRIPT>


→ JavaScript関数「reset()」を自作する
 
続いて、マウスやキーボードが操作された場合に呼び出される関数「reset()」を作成します。この記述はとっても簡単で、秒数をカウントする変数「t」の値を0に戻すだけです。なお、テクニックを完成するには、移動先のHTMLファイルも作成しておく必要があります。今回は、『残像を残しながら画像を自動的に切り替える』を利用して移動先ページを作成しました。そのほか、移動先ページには、元のページへ戻るためのリンクも作成しておくとよいでしょう。
<SCRIPT language="JavaScript">
<!--
t=0;
tmax=15;

function count(){
t++;
if (t>tmax) location.href="slideshow.html";
setTimeout("count()",1000);
}

function reset(){
t=0;
}
// -->
</SCRIPT>
サンプルページ


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze